<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级菜单</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #menu {
            width: 200px;
            margin: 20px;
        }

        .province {
            cursor: pointer;
        }

        .title {
            height: 30px;
            text-align: center;
            background-color: #369;
            color: white;
            line-height: 30px;
            font-size: 18px;
        }

        .city>li {
            height: 30px;
            text-align: center;
            background-color: rgb(81, 153, 189);
            color: white;
            line-height: 30px;
            position: relative;
        }

        .city>li:hover>.district {
            display: block;
        }

        .district {
            background-color: rgb(122, 173, 199);
            color: white;
            position: absolute;
            top: 0px;
            left: 200px;
            width: 200px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="menu">
        <!-- <div class="province">
            <div class="title">江苏省</div>
            <ul class="city">
                <li>南京市
                    <ul class="district">
                        <li>秦淮区</li>
                        <li>鼓楼区</li>
                    </ul>
                </li>
                <li>苏州市
                    <ul class="district">
                        <li>虎丘区</li>
                        <li>东城区</li>
                    </ul>
                </li>
            </ul>
        </div> -->
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //定义一个省份数组
        let provinces = []
        //加载数据的方法
        function loadData() {
            $.get('./data/city.json', res => {
                //先从原始数据中获取所有的省份信息
                provinces = res.filter(r => r.pid === 0)
                //循环省份数组
                provinces.forEach(p => {
                    //给每个省份对象，添加一个城市数组
                    p.citys = res.filter(r => r.pid === p.id)
                    //循环每个省份里面的城市数组
                    p.citys.forEach(c => {
                        //给每个城市对象，添加一个区县数组
                        c.districts = res.filter(r => r.pid === c.id)
                    })
                })
                //调用显示数据的方法
                showData();
            })
        }
        //显示数据的方法
        function showData(){
            //循环出所有的省份信息
            provinces.forEach(p=>{
                //创建省份div
                let province = $('<div class="province"/>')
                let title = $('<div class="title"/>').html(p.name)
                province.append(title)
                let city = $('<ul class="city"/>')
                province.append(city)
                //循环出每个省份的城市信息
                p.citys.forEach(c=>{
                    let li = $('<li/>').html(c.name)
                    city.append(li)
                    let district = $('<ul class="district"/>')
                    li.append(district)
                    //循环出每个城市的区县信息
                    c.districts.forEach(d=>{
                        let li2 = $('<li/>').html(d.name)
                        district.append(li2)
                    })
                })
                //将省份div添加到menu中
                $('#menu').append(province)
            })
        }
        //调用加载数据的方法
        loadData();
    </script>
</body>

</html>